<template>
  <view class="detail-wrapper">
    <view class="background-top"></view>
    <view class="pay-info2">
      <p>{{ payDetail.salaryReal }}</p>
      <p>实发工资(元)</p>
    </view>
    <view class="paylist" :style="{backgroundImage: bgImg}">
      <view v-if="payDetail.checkStatus">
        <image
          src="/payroll/img/ok.png"
          style="position: absolute;top: 10px;right: 10px;width:97px;height: 67px;"
        />
      </view>
      <div class="payitem flex-start-line">
        <image src="/payroll/img/basic.png" />
        <span class="pl10">基本项目</span>
      </div>
      <template v-for="(item, index) in payitem">
        <div v-if="(payDetail.showEmptyValue === true && payDetail[item.fieldValue] === 0) || payDetail[item.fieldValue]" :key="index" class="payitem flex">
          <span>{{ item.fieldName }}</span>
          <span>
            {{ payDetail[item.fieldValue] == null ? "" : payDetail[item.fieldValue] }}
          </span>
        </div>
      </template>
    </view>
    <view v-if="payDetail.salaryBillFieldsDOList.length > 0" class="paylist">
      <div class="payitem flex-start-line">
        <image src="/payroll/img/shiming.png" />
        <span class="pl10">其他明细</span>
      </div>
      <template v-for="(item, index) in payDetail.salaryBillFieldsDOList">
        <div v-if="(payDetail.showEmptyValue === true && item.fieldValue === 0) || item.fieldValue" :key="index">
          <div class="payitem flex">
            <span>{{ item.fieldName }}</span>
            <span>{{ item.fieldValue == null ? "" : item.fieldValue }}</span>
          </div>
        </div>
      </template>
    </view>
    <view v-if="!payDetail.checkStatus">
      <button class="btn-confirm" @click="confirmReceive">确认收到且工资无误</button>
    </view>
    <view v-if="!payDetail.checkStatus" class="pay-tip">
      <p>注意：</p>
      <p>
        本工资条即将在
        <span>
          {{
          payDetail.autoCheckDiffStr ? payDetail.autoCheckDiffStr : autoTime
          }}
        </span>后自动确认。
      </p>
      <p>工资条完成确认代表您对本工资条所有内容无任何异议。</p>
    </view>
  </view>
</template>
<script>
import {
  getSalaryBillRelation,
  updateSalaryBills
} from "@/services/salaryBill";
import { mapState } from "vuex";

const payitem = process.env.VUE_APP_SUBJECT === 'csxr'
  ? [
      { fieldName: "应发工资", fieldValue: "salaryAmount" },
      { fieldName: "实发工资", fieldValue: "salaryReal" }
    ]
  : [
    { fieldName: "应发工资", fieldValue: "salaryAmount" },
    { fieldName: "扣个人社保", fieldValue: "empSoc" },
    { fieldName: "基本工资", fieldValue: "salaryBasic" },
    { fieldName: "扣个人公积金", fieldValue: "empPf" },
    { fieldName: "扣个人所得税", fieldValue: "empTax" },
    // { fieldName: " 考勤扣款", fieldValue: "deduction" },
    { fieldName: "实发工资", fieldValue: "salaryReal" }
  ]

export default {
  data() {
    return {
      bgImg: `url("data:image/svg+xml,%3Csvg width='50' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill-opacity='0.2' text-anchor='middle' dominant-baseline='middle' transform='rotate(-20, 100 100)'%3Errrrrrrr%3C/text%3E%3C/svg%3E")`,
      companyName: uni.getStorageSync("companyName"),
      payDetail: {},
      payitem,
      billId: "",
      isChecked: false,
      autoTime: "1天"
    };
  },
  computed: {
    ...mapState(["settings"])
  },
  onLoad: function(option) {
    this.companyId = uni.getStorageSync("companyId");
    this.userId = uni.getStorageSync("employeeId");
    this.billId = option.id;
    console.log("option", option);
    console.log("companyId", uni.getStorageSync("companyId"));
    console.log("employeeId", uni.getStorageSync("employeeId"));
     console.log("token", uni.getStorageSync("token"));
  },
  onShow() {
    this.getlistSalaryBills(this.billId);
  },
  created() {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: this.settings.theme
    });
  },
  methods: {
    getlistSalaryBills(id) {
      getSalaryBillRelation({ companyId: this.companyId, id: id })
        .then(data => {
          this.payDetail = data;
          this.bgImg = `url("data:image/svg+xml,%3Csvg width='200' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill-opacity='0.2' text-anchor='middle' dominant-baseline='middle' transform='rotate(-20, 100 100)'%3E${this
            .companyName +
            "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0" +
            this.payDetail.empName}%3C/text%3E%3C/svg%3E")`;
          console.log(this.payDetail, "??????????????");
        })
        .catch(err => {
          console.log("debug log --> ", err);
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    confirmReceive() {
      var salaryBillUpdateDTO = {
        companyId: this.companyId,
        empId: this.userId,
        id: this.billId,
        checkStatus: true
      };
      updateSalaryBills(salaryBillUpdateDTO).then(res => {
        uni.showToast({
          title: "确认成功",
          icon: "none",
          duration: 2000
        });
        this.payDetail.checkStatus = !this.payDetail.checkStatus;
      });
    }
  }
};
</script>
<style lang="scss">
page {
  background-color: $bg-gray;
}

.background-top {
  margin-top: -20px;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 180px;
  margin-left: -21px;
  background-color: $uni-color-primary;
  border-bottom-left-radius: 70%;
  border-bottom-right-radius: 70%;
}
</style>
